<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云内容</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./common.css">
    <style>
        .main {
            display: flex;
            width: 980px;
            height: 1424px;
            /* background-color: orange; */
            border: 1px solid #999;
            border-bottom: none;
        }

        .main .left {
            width: 730px;
            padding: 20px 20px 40px 20px;
            box-sizing: border-box;
            border-right: 1px solid #999;
        }

        .main .right {
            width: 250px;
            box-sizing: border-box;

            /* background-color: aqua; */

        }

        .main .right .login {
            /* display: flex; */
            height: 218px;
            text-align: center;
            background-image: url(../image/index.png);
            background-position: 0px 9999px;
            background-repeat: no-repeat;
            overflow: hidden;

        }

        .main .right .vip {
            width: 250px;
            height: 92px;
        }

        .main .right img {
            width: 250px;
            height: 92px;
        }

        .main .right .login .login-son {
            position: relative;
            width: 250px;
            height: 126px;
            box-sizing: border-box;
            background-image: url(../image/index.png);
            background-position: 0px 0px;
            background-repeat: no-repeat;
        }

        .login .text {
            position: relative;
            bottom: 5px;
            height: 44px;
            font-size: 12px;
            color: #999;
            padding: 20px;
        }

        .login .btn {
            position: absolute;
            left: 70px;
            bottom: 24px;
            width: 100px;
            line-height: 31px;
            border-radius: 5px;
            color: #fff;
            background-color: #8a060b;
            ;
        }

        .login .btn:hover {
            background-color: red;
        }

        .right .content {
            padding: 20px;
        }

        .right .content .singer-info {
            display: flex;
            margin-top: 10px;
            width: 210px;
            height: 62px;
            border: 1px solid #666;
            cursor: pointer;
        }

        .right .content .singer-info .opus {
            width: 62px;
            height: 62px;
            margin: 0;
            padding: 0;
            background-image: url(../image/singer-picture.jpg);
            background-size: 62px 62px;
        }

        .right .content .info {
            display: flex;
            flex-direction: column;
            justify-content: center;

        }

        .right .content .singer-info .name {
            font-size: 14px;
            margin-bottom: 5px;
        }

        .right .content .singer-info .text {
            font-size: 12px;
            color: #666;
        }


        .right .content2 {
            margin-top: 20px;
        }

        .right .content2 .name:hover {
            cursor: pointer;
            text-decoration: underline 1px solid #000;
        }

        .right .content2 .picture {
            cursor: pointer;
        }


        .left .content {
            display: flex;
            flex-wrap: wrap;

        }


        .left .content .item {
            box-sizing: border-box;
            width: 150px;
            height: 200px;
            margin: 10px;

        }


        .left .content .item .top {
            width: 140px;
            height: 140px;
            cursor: pointer;
        }



        .left .content .item .text {
            margin-top: 10px;
            height: 60px;
            width: 140px;
            font-size: 14px;
            cursor: pointer;
        }

        .left .content2 {
            position: relative;
            width: 689px;
            height: 185px;
            box-sizing: border-box;
            /* background-color: red; */
            margin-top: 20px;
            border: #666 solid 1px;
            padding-top: 28px;
             background-color: #eee;
        }

        .left .content2 .inner {
            /* position: relative; */
            display: flex;
            overflow: hidden;
            width: 645px;
            height: 150px;
            box-sizing: border-box;
            /* padding-left: 20px;
            padding-right: 20px; */
            /* background-color: palevioletred; */
        }
        
          .left .content2 .inner .list 
          {
            display: block;
            display: flex;
            flex-shrink: 0;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            width: 645px;
            height: 150px;
            
          }

            .left .content2 .inner .item
            {
                width: 118px;
                height: 150px;
                /* margin-right: 15px;
                 */
            }

            .left .content2 .inner .item .top
            {
                position: relative;
                width: 118px;
                height: 100px;
            }

             .left .content2 .inner .item .top .coverall
             {
                position: absolute;
                right: 0px;
                display: inline-block;
                 width: 118px;
                 height: 100px;
                 background-image: url(../image/coverall.png);
                 background-position: 0 -570px;

             }

            .left .content2 .inner .item .bottom .work
            {
              margin-top: 10px;
              font-size: 11px;
            
            }

            .left .content2 .inner .item .bottom .name
            {
                font-size: 12px;
                color: #666;
            }
            
            .i-1
            {
                position: absolute;
                display: inline-block;
                width: 17px;
                height: 17px;
                background-image: url(../image/index.png);
                 background-repeat: no-repeat;
            }

          
            .left .inner .left-arrowhead
            {
                
                left: 5px;
                top: 80px;
                background-position:-260px -75px;
            }

              .left .inner .left-arrowhead:hover
              {
                    background-position:-260px -75px;
              }

            .left .inner .right-arrowhead
            {
                
                right: 30px;
                top: 80px;
                background-position:-300px -75px;
            }

              .left .inner .right-arrowhead:hover
              {
                   background-position:-320px -75px;
              }
            
            
    </style>
</head>

<body>
    <div class="main">
        <div class="left">
            <div class="big-header">
                <div class="list">
                    <ul>
                        <li class="hot"><a href="#">热门推荐</a></li>
                        <li class="item"><a href="#">华语</a></li>
                        <li class="item">|</li>
                        <li class="item"><a href="#">流行</a></li>
                        <li class="item">|</li>
                        <li class="item"><a href="#">摇滚</a></li>
                        <li class="item">|</li>
                        <li class="item"><a href="#">民谣</a></li>
                        <li class="item">|</li>
                        <li class="item"><a href="#">电子</a></li>
                    </ul>
                </div>
                <div class="more">
                    更多
                </div>
            </div>
            <div class="content">
                <div class="item">
                    <div class="top">
                        <img src="../image/singer-list.jpg" alt="">
                    </div>
                    <div class="bottom">
                        <div class="text">
                            经典粤语合集【无损音质】黑胶唱片会员专属"
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="top">
                        <img src="../image/singer-list.jpg" alt="">
                    </div>
                    <div class="bottom">
                        <div class="text">
                            经典粤语合集【无损音质】黑胶唱片会员专属"
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="top">
                        <img src="../image/singer-list.jpg" alt="">
                    </div>
                    <div class="bottom">
                        <div class="text">
                            经典粤语合集【无损音质】黑胶唱片会员专属"
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="top">
                        <img src="../image/singer-list.jpg" alt="">
                    </div>
                    <div class="bottom">
                        <div class="text">
                            经典粤语合集【无损音质】黑胶唱片会员专属"
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="top">
                        <img src="../image/singer-list.jpg" alt="">
                    </div>
                    <div class="bottom">
                        <div class="text">
                            经典粤语合集【无损音质】黑胶唱片会员专属"
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="top">
                        <img src="../image/singer-list.jpg" alt="">
                    </div>
                    <div class="bottom">
                        <div class="text">
                            经典粤语合集【无损音质】黑胶唱片会员专属"
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="top">
                        <img src="../image/singer-list.jpg" alt="">
                    </div>
                    <div class="bottom">
                        <div class="text">
                            经典粤语合集【无损音质】黑胶唱片会员专属"
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="top">
                        <img src="../image/singer-list.jpg" alt="">
                    </div>
                    <div class="bottom">
                        <div class="text">
                            经典粤语合集【无损音质】黑胶唱片会员专属"
                        </div>
                    </div>
                </div>

            </div>
            <div class="big-header header">
                <div  class="list" >
                    <ul>
                        <li class="hot"><a href="#">新碟上架</a></li>
                    </ul>
                </div>
                <div class="more">
                    更多
                </div>
            </div>
            <div class="content2">
                <div class="inner">
                <ul class="list">
                    <li class="item">
                        <div class="top">
                            <img src="../image/carousel-picture.jpg" alt="图片">
                            <i class="coverall"></i>
                        </div>
                        <div class="bottom">
                            <div class="work">rosie</div>
                            <div class="name">ROSE</div>
                        </div>
                    </li>
                    <li class="item">
                         <div class="top">
                            <img src="../image/carousel-picture.jpg" alt="图片">
                            <i class="coverall"></i>
                        </div>
                        <div class="bottom">
                            <div class="work">rosie</div>
                            <div class="name">ROSE</div>
                        </div>
                    </li>
                    <li class="item">
                         <div class="top">
                            <img src="../image/carousel-picture.jpg" alt="图片">
                            <i class="coverall"></i>
                        </div>
                        <div class="bottom">
                            <div class="work">rosie</div>
                            <div class="name">ROSE</div>
                        </div>
                    </li>
                    <li class="item">
                         <div class="top">
                            <img src="../image/carousel-picture.jpg" alt="图片">
                            <i class="coverall"></i>
                        </div>
                        <div class="bottom">
                            <div class="work">rosie</div>
                            <div class="name">ROSE</div>
                        </div>
                    </li>
                    <li class="item">
                         <div class="top">
                            <img src="../image/carousel-picture.jpg" alt="图片">
                            <i class="coverall"></i>
                        </div>
                        <div class="bottom">
                            <div class="work">rosie</div>
                            <div class="name">ROSE</div>
                        </div>
                    </li>
                </ul>
                <ul class="list">
                    <li class="item">
                        <div class="top">
                            <img src="../image/carousel-picture.jpg" alt="图片">
                            <i class="coverall"></i>
                        </div>
                        <div class="bottom">
                            <div class="work">rosie</div>
                            <div class="name">ROSE</div>
                        </div>
                    </li>
                    <li class="item">
                         <div class="top">
                            <img src="../image/carousel-picture.jpg" alt="图片">
                            <i class="coverall"></i>
                        </div>
                        <div class="bottom">
                            <div class="work">rosie</div>
                            <div class="name">ROSE</div>
                        </div>
                    </li>
                    <li class="item">
                         <div class="top">
                            <img src="../image/carousel-picture.jpg" alt="图片">
                            <i class="coverall"></i>
                        </div>
                        <div class="bottom">
                            <div class="work">rosie</div>
                            <div class="name">ROSE</div>
                        </div>
                    </li>
                    <li class="item">
                         <div class="top">
                            <img src="../image/carousel-picture.jpg" alt="图片">
                            <i class="coverall"></i>
                        </div>
                        <div class="bottom">
                            <div class="work">rosie</div>
                            <div class="name">ROSE</div>
                        </div>
                    </li>
                    <li class="item">
                         <div class="top">
                            <img src="../image/carousel-picture.jpg" alt="图片">
                            <i class="coverall"></i>
                        </div>
                        <div class="bottom">
                            <div class="work">rosie</div>
                            <div class="name">ROSE</div>
                        </div>
                    </li>
                </ul>
                <i class="left-arrowhead i-1"></i>
                <i class="right-arrowhead i-1"></i>
                </div>
            </div>
            <div class="big-header header">
                <div class="list">
                    <ul>
                        <li class="hot"><a href="#">榜单</a></li>
                    </ul>
                </div>
                <div class="more">
                    更多
                </div>
            </div>
        </div>
        <div class="right">
            <div class="login">
                <div class="vip">
                    <a href="#">
                        <img src="../image/dis_vip_card.png" alt="图片">
                    </a>
                    <div class="login-son">
                        <p class="text">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                        <a href="#">
                            <div class="btn">
                                用户登录
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="small-header">
                    <div class="settle-singer">
                        <h2>入驻歌手</h2>
                    </div>
                    <div class="more">
                        查看更多&gt;
                    </div>
                </div>
                <div class="singer-info">
                    <div class="opus">

                    </div>
                    <div class="info">
                        <h2 class="name">张惠妹aMEI</h2>
                        <div class="text">台湾歌手张惠妹</div>
                    </div>
                </div>
                <div class="singer-info">
                    <div class="opus">

                    </div>
                    <div class="info">
                        <h2 class="name">张惠妹aMEI</h2>
                        <div class="text">台湾歌手张惠妹</div>
                    </div>
                </div>
                <div class="singer-info">
                    <div class="opus">

                    </div>
                    <div class="info">
                        <h2 class="name">张惠妹aMEI</h2>
                        <div class="text">台湾歌手张惠妹</div>
                    </div>
                </div>
                <div class="singer-info">
                    <div class="opus">

                    </div>
                    <div class="info">
                        <h2 class="name">张惠妹aMEI</h2>
                        <div class="text">台湾歌手张惠妹</div>
                    </div>
                </div>
                <div class="singer-info">
                    <div class="opus">

                    </div>
                    <div class="info">
                        <h2 class="name">张惠妹aMEI</h2>
                        <div class="text">台湾歌手张惠妹</div>
                    </div>
                </div>

            </div>
            <div class="btn">
                <i>申请成为网易音乐人</i>
            </div>
            <div class="content content2">
                <div class="small-header">
                    <div class="settle-singer">
                        <h2>热门主播</h2>
                    </div>
                </div>
                <div class="anchor-hot">
                    <div class="picture"></div>
                    <div class="info">
                        <div class="name">陈立</div>
                        <div class="intro">心理学家，美食家陈立教授</div>
                    </div>
                </div>
                <div class="anchor-hot">
                    <div class="picture"></div>
                    <div class="info">
                        <div class="name">陈立</div>
                        <div class="intro">心理学家，美食家陈立教授</div>
                    </div>
                </div>
                <div class="anchor-hot">
                    <div class="picture"></div>
                    <div class="info">
                        <div class="name">陈立</div>
                        <div class="intro">心理学家，美食家陈立教授</div>
                    </div>
                </div>
                <div class="anchor-hot">
                    <div class="picture"></div>
                    <div class="info">
                        <div class="name">陈立</div>
                        <div class="intro">心理学家，美食家陈立教授</div>
                    </div>
                </div>
                <div class="anchor-hot">
                    <div class="picture"></div>
                    <div class="info">
                        <div class="name">陈立</div>
                        <div class="intro">心理学家，美食家陈立教授</div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>
</body>

</html>